import { MathUtils, Shape, PlaneGeometry, MeshBasicMaterial, Mesh, BufferGeometry, LineBasicMaterial, Line, Group } from 'three'
import { disposeObject } from '/src/utils/dispose.js'
import { Text } from 'troika-three-text'

/**
 * 生成三角形 + 长方形的轮廓
 * @param {number} width  总宽度
 * @param {number} height 总高度（包含三角形和长方形）
 * @param {string} color  线条颜色（默认红色）
 * @param {params} theta   信息
 * @param {group} group   组
 */
export const createCustomShape = (color = 0xffffff, params, groupBox, groupText) => {
  // 优化方案 可以用实例化来优化内存和cpu的占用
  const shape = new Shape()
  const group = new Group()

  // 计算尺寸比例
  const width = 1
  const height = 3
  const rectHeight = height * 0.7 // 长方形部分
  const notchDepth = height * 0.3 // V 形缺口的深度

  // 1 画长方形
  shape.moveTo(-width / 2, -height / 2) // 左下角
  shape.lineTo(-width / 2, -height / 2 + rectHeight) // 左上角
  shape.lineTo(width / 2, -height / 2 + rectHeight) // 右上角
  shape.lineTo(width / 2, -height / 2) // 右下角
  shape.lineTo(-width / 2, -height / 2) // 闭合长方形

  // 2 画 V 形缺口
  shape.moveTo(-width / 2, -height / 2 + rectHeight) // 矩形左上角
  shape.lineTo(0, -height / 2 + rectHeight - notchDepth) // V 形底部
  shape.lineTo(width / 2, -height / 2 + rectHeight) // 矩形右上角
  shape.lineTo(-width / 2, -height / 2 + rectHeight) // 闭合 V 形

  // 生成几何体
  const points = shape.getPoints()
  const geometry = new BufferGeometry().setFromPoints(points)
  const material = new LineBasicMaterial({ color })

  // 生成线框对象
  const line = new Line(geometry, material)
  line.position.set(params['position-x'], params['position-y'], 0.5)
  line.rotation.z = MathUtils.degToRad(-params.theta - 180)
  line.name = `carLine_${params.id}`
  line.carId = params.id
  line.label = params.label
  // 添加到组
  groupBox.add(line)

  // 生成文字显示
  createText(groupText, params)
}

// 通过名字拿到对应的shape
export const getGroupLineByName = (group, elementName) => {
  // 遍历 group 的最外层子对象
  for (let child of group.children) {
    if (child.name === elementName) {
      // 找到该名称的元素，并且它是一个 THREE.Line
      return child // 返回该元素
    }
  }
  return null // 如果遍历完都没找到，返回 null
}

// 更新车框线位置和旋转角度
export const updateCarPosition = (params, hexColor, line, text) => {
  const colorHex = line.material.color.getHex()
  const colorNumber = parseInt(hexColor.slice(1), 16)

  if (colorNumber !== colorHex) {
    line.material.color.set(hexColor)
  }

  line.position.set(params['position-x'], params['position-y'], 0.5)
  line.rotation.z = MathUtils.degToRad(-params.theta - 180)

  text.position.set(params['position-x'], params['position-y'] + 2, 0.7)
}

// 移除车框线和文字
export const removeCarData = (group, groupText, idArr) => {
  // 过滤出需要删除的元素
  const elementsToRemove = group.children.filter((child) => !idArr?.includes(child.carId) && !child.syboml)

  const elementsToRemoveText = groupText.children.filter((child) => !idArr?.includes(child.carId))

  // 递归释放 Three.js 资源并从 group 移除
  elementsToRemove.forEach((child) => {
    if (child?.syboml) {
      child.visible = false //如果是目标框的话 则进行隐藏
    } else {
      disposeObject(child) // 释放几何体、材质等资源
      group.remove(child)
    }
  })

  // 移除文字
  elementsToRemoveText.forEach((child) => {
    groupText.remove(child)
    child.dispose() // 释放几何体、材质等资源
  })
}

// 过滤颜色
export const filterColor = (type, store) => {
  let color = '#ffffff'
  const params = store.carTypeColor.find((element) => element.type == type)
  if (params) color = params.color

  return color
}

// 生成对应的文字 展示到场景中
export const createText = (group, params) => {
  const myText = new Text()
  group.add(myText)
  // console.log('创建文字', myText)

  const str = `${params.id}+${params['source-camera-id'] ?? ''}+${params['station-id'] ?? ''}`
  myText.text = str
  myText.fontSize = 1.5
  // myText.font = '/public/lib/minimal.json'
  myText.position.set(params['position-x'], params['position-y'] + 2, 0.7)
  myText.color = '#ffffff'
  myText.center = 'center'
  // 设置锚点（对齐方式）
  myText.anchorX = 'center'
  myText.anchorY = 'middle'
  myText.name = `text_${params.id}`
  myText.carId = params.id
  myText.sync()
}

// 创建选中的 mesh
export const creatSelectMesh = (group, width, height) => {
  // 使用 PlaneGeometry 创建一个长方形面
  const geometry = new PlaneGeometry(width, height)

  // 创建材质，填充颜色
  const material = new MeshBasicMaterial()

  // 创建一个 Mesh 对象，将几何体和材质绑定
  const mesh = new Mesh(geometry, material)
  mesh.syboml = 'mesh'
  mesh.name = 'selectMesh'
  mesh.visible = false
  mesh.carId = null
  // 将 mesh 添加到 group 中
  window.mesh = mesh
  group.add(mesh)
}

// 创建一个子面 用来显示 id 和来源等信息
export const creatLabelMesh = (w, h, str) => {
  // 使用 PlaneGeometry 创建一个长方形面
  const geometry = new PlaneGeometry(w, h)

  // 填充贴图

  const mapTexture = createTextTexture(str)

  // 创建材质，填充颜色
  const material = new MeshBasicMaterial({
    color: '#ffffff',
    map: mapTexture,
    transparent: true,
  })

  const mesh = new Mesh(geometry, material)
  mesh.raycast = () => {} // 禁止射线检测
  mesh.name = 'tip'
  return mesh
}
